<template>
	<view>
		<img class="bg-img" src="@appstatic/img/my/bg-img.jpg" alt="">
		<view class="sticky">
			<view class="orange-tip">
				<view class="text">
					<uni-icons type="info-filled" size="16" color="#EA5404"></uni-icons>
					<view style="padding-left: 6px;">找不到我的品牌，快速选择默认品牌</view>
				</view>
				<view class="arrow" @click="chooseDefault">
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
			<view class="search-father">
				<view class="search">
					<!-- <input class="uni-input" @input="onKeyInput" placeholder="搜索经销商" /> -->
					<u-search 
						class="uni-input" 
						placeholder="搜索经销商" 
						shape="square" 
						:showAction="false"
						v-model="searchData"
						@change="changeSearchData"
						@search="searchData"
						@clickIcon="searchData"
					></u-search>
					<view class="cancel" @click="cancel">
						<span>取消</span>
					</view>
				</view>
			</view>
		</view>
		
		<scroll-view v-if="list.length!=0" scroll-y="true" @scrolltolower="handleToLower">
			<view class="result">
				<view class="big-row" v-for="(item,index) in list">
					<view class="series">{{item.seriesName}}</view>
					<view class="small-row" v-for="(item1,index) in item.model">
						<img src="" alt="">
						<view class="small-row-content">
							<view class="">{{item1.modelName}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js");
	import titlebara from '@/components/titlebar/titlebar'
	export default {
		components: {
			titlebara
		},
		data() {
			return {
				searchData:'',
				list:[
					{
						seriesName:'踏板车系列',
						model:[
							{
								img:'',
								modelName:'引力1',
							},
							{
								img:'',
								modelName:'引力2',
							},
						]
					},
					{
						seriesName:'KPT系列',
						model:[
							{
								img:'',
								modelName:'星舰1',
							},
							{
								img:'',
								modelName:'星舰2',
							},
						]
					},
				],
			}
		},
		onShow: function(options){
			// this.showList(true);
		},
		methods:{
			showList(){
				var that=this;
				var uri=app.globalData.config.interfaces.xxx
				var params={
					"pageNum":isRefresh?1:that.pagination.page,
					"pageSize":that.pagination.limit,
				}
				network.get(uri,prams,'form').then(res=>{
					if(res.code==200){
						var _list=res.data.list;
						var totalPage=Math.ceil(res.data.total / that.pagination.limit)
						if(isRefresh){
							that.pagination.totalPage=totalPage;
							that.list=_list ? _list:[]
						}else{
							if(_list && _list.length>0){
								that.list=[...that.list,..._list]
							}
						}
						if(that.pagination.page==that.pagination.totalPage){
							that.pagination.loadMore=false;
						}
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch()
			},
			handleToLower(){
				if(this.pagination.loadMore){
					this.pagination.page+=1;
					this.showList(false)
				}else{
					uni.showToast({
						title:"暂无更多数据",
						duration: 3000,
						icon: 'none'
					})
				}
			},
			searchData(){//点击搜索键
				this.showList(true);
			},
			chooseDefault(){//选择默认品牌
				
			},
			changeSearchData(){
				
			},
		}
	}
</script>
<style>
	page {
		width: 100%;
	}
</style>
<style scoped>
	.bg-img {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.sticky {
		position: sticky;
		top:0;
		z-index: 100;
		background-color: #F5F5F5;
	}
	.orange-tip {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:space-between;
		
		height: 39px;
		background: rgba(234, 84, 4, 0.2);
		padding-left: 17px;
	}
	.text {
		min-width: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 26upx;
		line-height: 19px;
	}
	.arrow {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 36px;
	}
	.search-father {
		position: sticky;
		top:0;
		z-index: 100;
		background-color: #F5F5F5;
	}
	.search {
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items:center;
		justify-content:space-between;
	}
	.uni-input {
		padding: 0px 0px 0px 16px;
		min-width: 0;
		flex: 1;
	}
	.cancel {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 58px;
		height: 36px;
	}
	.result {
		display: flex;
		flex-direction: column;
		padding-left: 24px;
		padding-right: 24px;
	}
	.series {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 700;
		font-size: 32upx;
		line-height: 23px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
		padding: 12;
		padding: 12px 0px 12px 0px;
	}
	.small-row {
		display: flex;
		align-items: center;
		height: 114px;
	}
	.small-row-content {
		padding-left: 24px;
	}
	img {
		width: 150px;
		height: 80px;
	}
</style>